<template>
  <el-space wrap>
    <el-button type="primary" @click="openDialog('add')"
      >新增用例</el-button
    >
  </el-space>
  <el-button type="success" @click="handleExecute">批量运行</el-button>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    style="width: 100%"
    stripe
    height="800"
    :header-cell-style="{ textAlign: 'center' }"
    :cell-style="{ textAlign: 'center' }"
  >
    <el-table-column type="selection" />
    <el-table-column prop="id" label="用例ID" width="100" />
    <el-table-column prop="name" label="用例名称" />
    <el-table-column prop="url" label="请求url" />
    <el-table-column prop="method" label="请求方法" />
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, 'edit')">修改</el-button>

        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index)"
          >删除</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="handleDebug(scope.$index)"
          >调试</el-button
        >
      </template>
    </el-table-column>
  </el-table>


  <el-dialog 
  v-model="dialogVisible" 
  :title="dialogType == 'add' ? '新增用例' : '修改用例'" 
  :before-close="handleCancel" width="50%">
    <!-- 内容区域 -->
    <el-form :model="formData" ref="ruleFormRef" label-width="60px" :rules="rules">
      <el-form-item v-if="dialogType == 'edit'" label="用例id">
        <el-input v-model="formData.id" disabled />
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="路径" prop="url">
        <el-input v-model="formData.url" />
      </el-form-item>
      <el-form-item label="方法" prop="method">
        <el-select v-model="formData.method" placeholder="请选择请求方式">
          <el-option label="GET" value="GET" />
          <el-option label="POST" value="POST" />
          <el-option label="PUT" value="PUT" />
          <el-option label="DELETE" value="DELETE" />
        </el-select>
      </el-form-item>

      <el-form-item label="参数">
        <el-input v-model="formData.params" type="textarea" />
      </el-form-item>
      <el-form-item label="数据">
        <el-input v-model="formData.data" type="textarea" />
      </el-form-item>
    </el-form>
    <!-- 底部插槽 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="handleSubmit">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const ruleFormRef = ref();
// 弹框是否展示
const dialogVisible = ref(false);
// 表单数据
const formData = ref({
  id: "",
  name: "",
  url: "",
  method: "",
  params: "",
  data: "",
});
// 表格数据
const tableData = ref([]);
const dialogType = ref("add");
// 点击修改
const handleEdit = (index, type) => {
  dialogType.value = type;
  formData.value = tableData.value[index];
  dialogVisible.value = true;
};
// 打开弹框
const openDialog = (type) => {
  dialogType.value = type;
  dialogVisible.value = true;
};
// 取消弹框
const handleCancel = (ruleFormRef) => {
  formData.value = {
    id: "",
    name: "",
    url: "",
    method: "",
    params: "",
    data: "",
  };
  dialogVisible.value = false;
  // 去除 新增时的字段验证提示
  if (dialogType.value == "add") {
    ruleFormRef.resetFields();
  }
};
// 弹框确认
const handleSubmit = () => {
  if (dialogType.value == "add") {
    // 新增时将id去除掉
    const { id, ...newAddData } = formData.value;
        // 新增数据
    $api.testcase
      .addTestcase(newAddData)
      .then((result) => {
        if (result.data.code == 0) {
          ElMessage.success(result.data.msg);
          initData();
        } else {
          ElMessage.warning(result.data.msg);
        }
      })
      .catch((err) => {});
  } else {
    // 修改数据
    $api.testcase
      .updateTestcase(formData.value)
      .then((result) => {
        if (result.data.code == 0) {
          ElMessage.success(result.data.msg);
          initData();
        } else {
          ElMessage.warning(result.data.msg);
        }
      })
      .catch((err) => {});
  }
  initData();
  handleCancel();
};
// 批量运行的id数组
const idList = ref([]);
// 勾选后自动触发
const handleSelectionChange = (items) => {
  console.log("items", items);
  idList.value = items.map((value) => value.id);
  console.log("idList.value", idList.value);
};
// 批量运行
const handleExecute = () => {
  $api.task
    .executeTask({ ids: idList.value })
    .then((result) => {
      if (result.data.code == 0) {
        ElMessage.success(result.data.msg);
      } else {
        ElMessage.warning(result.data.msg);
      }
    })
    .catch((err) => {});
};


// 删除
const handleDelete = (index) => {
  ElMessageBox.confirm("请确认是否删除？删除后数据将无法找回", "警告！", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      $api.testcase
        .deleteTestcase({ id: tableData.value[index].id })
        .then((result) => {
          if (result.data.code == 0) {
            ElMessage.success(result.data.msg);
            initData();
          } else {
            ElMessage.warning(result.data.msg);
          }
        })
        .catch((err) => {});
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

// 调试
const handleDebug = (index) => {
  $api.testcase
    .debugTestcase({ id: tableData.value[index].id })
    .then((result) => {
      if (result.data.code == 0) {
        ElMessage.success(result.data.msg);
      } else {
        ElMessage.warning(result.data.msg);
      }
    })
    .catch((err) => {});
};

// 表单验证规则
const rules = ref({
  name: [{ required: true, message: "请输入测试用例名称", trigger: "blur" },
  { min: 1, max: 30, message: '请输入有效长度1~30的用例名称', trigger: 'blur' }],
  url: [{ required: true, message: "请输入请求url", trigger: "blur" }],
  method: [{ required: true, message: "请输入请求方法", trigger: "blur" }],
});


// 初始化数据
const initData = () => {
  $api.testcase
    .getTestcase()
    .then((result) => {
      console.log("result", result.data);
      if (result.data.code == 0) {
        ElMessage.success(result.data.msg);
        tableData.value = result.data.data;
      } else {
        ElMessage.warning(result.data.msg);
      }
    })
    .catch((err) => {
      console.log("err", err);
    });
};

// 获取数据操作放在onMounted生命周期中
onMounted(() => {
  initData();
});


</script>
  
  <style>
</style>